<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

    <title>番茄钟</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .timer-popup {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #ffffff;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            transform: translateY(100%);
            transition: transform 0.3s ease-in-out;
            z-index: 9;
            border-radius: 20px 20px 0px 0px;
            height: 500px;
        }

        .timer-popup.show {
            transform: translateY(0%);
        }

        .timer-container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 220px;
            height: 220px;
            position: relative;
            top: 50px;
        }

        .timer-container::before {
            content: '';
            width: calc(100% + 0px);
            height: calc(100% + 0px);
            position: absolute;
            border-radius: 50%;
            border: 2px solid rgba(175, 175, 175, 0.527);
            top: -2px;
            left: -2px;
            z-index: 0;
        }

        .timer {
            font-size: 3rem;
            color: rgb(54, 54, 54);
        }

        .timer-btn1 {
            background-color: #3d3d3d;
            border: none;
            border-radius: 50px;
            color: #fff;
            cursor: pointer;
            font-size: 1rem;
            padding: 12px 27px;
            transition: background-color 0.2s ease, transform 0.2s ease;
            outline: none;
            margin-top: 100px;
            box-shadow: 0px 0px 20px rgba(95, 95, 95, 0.651);
            margin-bottom: 25px;
        }

        .timer-btn1:hover {
            background-color: #3d3d3d;
            box-shadow: 0px 0px 20px rgba(95, 95, 95, 0.651);
        }

        .timer-btn1:active {
            transform: scale(0.95);
        }
        .timer-btn2 {
            background-color: #d6d6d600;
            border: none;
            border-radius: 50px;
            color: #a1a1a1;
            cursor: pointer;
            font-size: 14px;
            padding: 3px 10px;

        }
        


        .timer-ring {
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0);
            animation: timer-ring 5s linear infinite;
            animation-play-state: paused;
        }

        @keyframes timer-ring {
            0% {
                box-shadow: 0 0 0 20px rgba(255, 102, 102, 0), 0 0 0 40px rgba(255, 102, 102, 0);
            }

            50% {
                box-shadow: 0 0 0 0px rgba(185, 185, 185, 0.247), 0 0 0 0px rgba(194, 194, 194, 0.308);
            }

            100% {
                box-shadow: 0 0 0 20px rgba(255, 102, 102, 0), 0 0 0 40px rgba(255, 102, 102, 0);
            }

        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.801);
            z-index: 5;
            display: none;
        }



        


        .close-popup {
            position: absolute;
            top: 15px;
            left: 15px;
            font-size: 1.5rem;
            background: none;
            border: none;
            cursor: pointer;
            color: #a0a0a0;
            font-size: 18px;
        }

        .timer-popup-dragging {
            transition: none;
        }
    </style>

</head>

<body>
    <button id="open-popup">打开番茄钟弹窗</button>
    <div class="timer-popup" id="timer-popup">
        <button class="close-popup" id="close-popup"><i class="fas fa-chevron-down"></i></button>
        <div class="timer-container">
            <div class="timer-ring"></div>
            <span class="timer" id="timer">00:00:00</span>
        </div>


        <div>
            <button class="timer-btn1" id="toggle-timer">开 始</button>
        </div>
        <div>
            <button class="timer-btn2" id="reset-timer">归零</button>
        </div>
    </div>
    <div class="overlay" id="overlay"></div>

    <script>
        const openPopupBtn = document.getElementById('open-popup');
        const closePopupBtn = document.getElementById('close-popup');
        const timerPopup = document.getElementById('timer-popup');
        const timerElement = document.getElementById('timer');
        const resetBtn = document.getElementById('reset-timer');

        window.addEventListener('load', () => {
            if (localStorage.getItem('seconds')) {
                seconds = parseInt(localStorage.getItem('seconds'));
                updateTimer();
            }
        });

        // 当页面加载时，检查localStorage中的弹窗状态
        window.addEventListener('load', () => {
            if (localStorage.getItem('popupOpen') === 'true') {
                timerPopup.classList.add('show');
                overlay.style.display = 'block';
            } else {
                timerPopup.classList.remove('show');
                overlay.style.display = 'none';
            }
        });

        window.addEventListener('load', () => {
    if (localStorage.getItem('timerRunning') === 'true') {
        startTimer();
    }
});


        const timerRing = document.querySelector(".timer-ring");
        openPopupBtn.addEventListener('click', () => {
            timerPopup.classList.add('show');
        });

        closePopupBtn.addEventListener('click', () => {
            timerPopup.classList.remove('show');
            overlay.style.display = 'none';

            localStorage.setItem('popupOpen', 'false');
            
        });


        let timer;
        let seconds = 0;
        let paused = true;

        const toggleBtn = document.getElementById('toggle-timer');

        toggleBtn.addEventListener('click', () => {
            if (paused) {
                timer = setInterval(() => {
                    if (seconds < 24 * 60 * 60) {
                        seconds++;
                        updateTimer();
                        localStorage.setItem('seconds', seconds);
                    }
                }, 1000);
                paused = false;
                toggleBtn.innerText = '暂 停';
                timerRing.style.animationPlayState = "running";
                localStorage.setItem('timerRunning', 'true');
            } else {
                clearInterval(timer);
                paused = true;
                toggleBtn.innerText = '开 始';
                timerRing.style.animationPlayState = "paused";
                // 将计时器状态存储到localStorage
        localStorage.setItem('timerRunning', 'false');
            }
        });

        

        resetBtn.addEventListener('click', () => {
            clearInterval(timer);
            seconds = 0;
            updateTimer();
            paused = true;
            localStorage.setItem('seconds', seconds);
        });

        function updateTimer() {
            const hours = Math.floor(seconds / 3600);
            const minutes = Math.floor((seconds % 3600) / 60);
            const remainingSeconds = seconds % 60;
            timerElement.innerText = `${formatTime(hours)}:${formatTime(minutes)}:${formatTime(remainingSeconds)}`;
        }
        function formatTime(value) {
            return value.toString().padStart(2, '0');
        }

        const overlay = document.getElementById('overlay');

        // 在打开弹窗的事件监听器中，将弹窗状态存储到localStorage
        openPopupBtn.addEventListener('click', () => {
            timerPopup.classList.add('show');
            overlay.style.display = 'block';
            timerPopup.style.transform = 'translateY(0%)';
            localStorage.setItem('popupOpen', 'true');
        });

        // 在关闭弹窗的事件监听器中，将弹窗状态存储到localStorage
        closePopupBtn.addEventListener('click', () => {
            timerPopup.classList.remove('show');
            overlay.style.display = 'none';
            timerPopup.style.transform = 'translateY(100%)';
            localStorage.setItem('popupOpen', 'false');
        });

// 刷新后读取
        function startTimer() {
    if (!paused) return;
    timer = setInterval(() => {
        if (seconds < 24 * 60 * 60) {
            seconds++;
            updateTimer();
            localStorage.setItem('seconds', seconds);
        }
    }, 1000);
    paused = false;
    toggleBtn.innerText = '暂停';
    timerRing.style.animationPlayState = 'running';

    // 将计时器状态存储到localStorage
    localStorage.setItem('timerRunning', 'true');
}


        let touchStartY = 0;

        function onTouchStart(event) {
            touchStartY = event.touches[0].clientY;
            timerPopup.classList.add('timer-popup-dragging');
        }

        function onTouchMove(event) {
            const touchMoveY = event.touches[0].clientY;
            const dragDistance = touchMoveY - touchStartY;

            if (dragDistance > 0) {
                timerPopup.style.transform = `translateY(${dragDistance}px)`;
            }
        }

        function onTouchEnd() {
            const threshold = window.innerHeight / 12;
            const translateY = parseInt(timerPopup.style.transform.slice(11));

            if (translateY > threshold) {
                timerPopup.classList.remove('show');
                timerPopup.style.transform = 'translateY(100%)';
                overlay.style.display = 'none';
                localStorage.setItem('popupOpen', 'false');
            } else {
                timerPopup.style.transform = 'translateY(0%)';
            }

            timerPopup.classList.remove('timer-popup-dragging');
        }

        timerPopup.addEventListener('touchstart', onTouchStart);
        timerPopup.addEventListener('touchmove', onTouchMove);
        timerPopup.addEventListener('touchend', onTouchEnd);
        timerPopup.addEventListener('touchcancel', onTouchEnd);


    </script>
</body>

</html>